<template>
	<view>
		<mu-canvas
			ref="shareimg"
			width="650"
			unit="rpx"
			height="1160"
			styles="margin-left: 50rpx;margin-top: 16rpx;"
			backgroundColor="#FFFFFF"
			:elementList="elementList"
			:auto="true"
		></mu-canvas>
		<view class="mt-[20rpx] mx-[30rpx]">
			<u-button type="" shape="circle" @click="save">保存图片</u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const val = ref('');
const nickname = ref('');
const shareimg = ref(null);
const elementList = ref({
	images: [
		//图片对象
		{
			path: '../../static/images/user/fen.png', //图片路径[必填]
			dx: 0, //左上角x轴[必填]
			dy: 0, //左上角y轴[必填]
			dWidth: 325, //宽度[必填]
			dHeight: 430, //高度[必填]
			sx: 0, //绘画的宽度[选填]
			sy: 0 //绘画的高度[选填]
		}
	],
	text: [
		//渲染文字
		{
			value: '邀请码：', //渲染的文字
			color: '#333333', //文字颜色[选填]
			size: '14', //大小[选填]
			font: 'PingFang SC-Regular, PingFang SC;', //字体[选填]
			x: 13, //左上角x轴[必填]
			y: 500, //左上角y轴[必填]
			// backgroundColor: "#ffffff", //背景色
			maxWidth: '', //字体最大宽度
			maxHeight: '' //字体最大高度
		}
	],
	qr: [
		//渲染的二维码
		{
			url: 'https://app.ahyybx.cn', //二维码文字[必填]
			dx: 201, //左上角x轴[必填]
			dy: 452, //左上角y轴[必填]
			size: 90, //二维码大小
			color: '#333333', //二维码前景色
			backgroundColor: '#ffffff' //二维码背景色
		}
	]
});

const save = async () => {
	shareimg.value.saveImg()
};


onLoad((options: any) => {
	val.value = options.id;
	nickname.value = options.nickname;
	elementList.value.qr[0].url = 'https://app.ahyybx.cn?pid=' + options.id;
	elementList.value.text[0].value = '邀请人：' + options.nickname;
});
</script>

<style lang="scss">
	
</style>
